import React from "react";
import type { CSSProperties } from "react";
// import { useModalContext } from "@/components/Modal/hooks/useModalContext";

interface FileListProps {
	columns: any[];
	actionColumn: any;
	dataSource: any[];
}

const FileList: React.FC<FileListProps> = ({ columns, actionColumn, dataSource }) => {
	// const modalFn = useModalContext();

	// useEffect(() => {
	// 	modalFn?.redoModalHeight?.();
	// }, [dataSource, modalFn]);

	const columnList = [...columns, actionColumn];

	return (
		<div className="overflow-x-auto">
			<table className="file-table">
				<colgroup>
					{columnList.map(item => {
						const { width = 0, dataIndex } = item;
						const style: CSSProperties = {
							width: `${width}px`,
							minWidth: `${width}px`
						};
						return <col style={width ? style : {}} key={dataIndex} />;
					})}
				</colgroup>
				<thead>
					<tr className="file-table-tr">
						{columnList.map(item => {
							const { title = "", align = "center", dataIndex } = item;
							return (
								<th className={`file-table-th ${align}`} key={dataIndex}>
									{title}
								</th>
							);
						})}
					</tr>
				</thead>
				<tbody>
					{dataSource.map((record = {}, index) => {
						return (
							<tr className="file-table-tr" key={`${index}-${record.name || ""}`}>
								{columnList.map(item => {
									const { dataIndex = "", customRender, align = "center" } = item;
									const render = customRender && typeof customRender === "function";
									return (
										<td className={`file-table-td break-all ${align}`} key={dataIndex}>
											{render ? customRender({ text: record[dataIndex], record }) : record[dataIndex]}
										</td>
									);
								})}
							</tr>
						);
					})}
				</tbody>
			</table>
		</div>
	);
};

export default FileList;
